<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2023-10-19 23:31:11
-->
<template>
  <div class="dashboard-container">
    <template
      v-for="equipDataType in Object.keys(equipDataTypeEnum)"
      :key="equipDataType"
    >
      <EquipDataTypeList
        :equipDataType="equipDataType"
        :dataArr="equipDashboardParam.dataMap[equipDataKeyMap[equipDataType]]"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, toRefs } from "vue";
import { equipDataTypeEnum, equipDataKeyMap } from "./index.type";
import { object_Inf } from "@/utils/typings/index.type";
import EquipDataTypeList from "./equipDataTypeList/index.vue";
import Dile_APi from "@/api";

/**
 * @Author: xzh
 * @Descripttion: 设备仪表单参数
 * @Param:
 */
let equipDashboardParam = reactive<object_Inf>({
  loading: false,
  dataMap: {},
  interval: null,
});

/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 */
onMounted(() => {
  let { interval } = toRefs(equipDashboardParam);
  init();
  // interval.value = setInterval(() => {
  //   init();
  // }, 1000 * 60 * 11);
});

onBeforeUnmount(() => {
  // let { interval } = equipDashboardParam;
  // clearInterval(interval);
});

/**
 * @Author: xzh
 * @Descripttion: 加载数据源
 * @Param:
 */
let init = async () => {
  let { loading, dataMap } = toRefs(equipDashboardParam);
  try {
    loading.value = true;
    dataMap.value = {
      ...(await Dile_APi.getShapingEquipDashboard()),
    };
  } finally {
    loading.value = false;
  }
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  :deep(.vxe-table) {
    .vxe-table--header-wrapper,
    .vxe-table--body-wrapper {
      background-color: var(--background-color) !important;
    }
  }
}
</style>
